<div id="sidebar" class="sidebar                  responsive                    ace-save-state">
    <script type="text/javascript">
        try{ace.settings.loadState('sidebar')}catch(e){}
    </script>

    <div class="sidebar-shortcuts" id="sidebar-shortcuts">
        <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
            <button class="btn btn-success">
                <i class="ace-icon fa fa-signal"></i>
            </button>

            <button class="btn btn-info">
                <i class="ace-icon fa fa-pencil"></i>
            </button>

            <button class="btn btn-warning">
                <i class="ace-icon fa fa-users"></i>
            </button>

            <button class="btn btn-danger">
                <i class="ace-icon fa fa-cogs"></i>
            </button>
        </div>

        <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
            <span class="btn btn-success"></span>

            <span class="btn btn-info"></span>

            <span class="btn btn-warning"></span>

            <span class="btn btn-danger"></span>
        </div>
    </div><!-- /.sidebar-shortcuts -->

    <ul class="nav nav-list">
        <#list menuList as resource>
            <li class="${resource.active(_url_code)}">
                <a href="${resource.url!}" <#if resource.notEnd> class="dropdown-toggle"</#if> >
                    <i class="menu-icon fa ${resource.iconCls!}"></i>
                    <span class="menu-text">
				${resource.resourceName!}
				<!-- <span class="badge badge-transparent tooltip-error" title="2 Important Events">
					<i class="ace-icon fa fa-exclamation-triangle red bigger-130"></i> 这个是加入 右侧图标提示
				</span> -->
			</span>
                    <#if resource.notEnd><b class="arrow fa fa-angle-down"></b></#if>
                </a>
                <b class="arrow"></b>
                <@resourceTree resource=resource />
            </li>
        </#list>
    </ul>
    <!-- /.nav-list -->

    <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
        <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
    </div>
</div>
<#macro resourceTree resource>
    <#if resource.notEnd>
        <ul class="submenu">
            <#list resource.childsResourceList as r1>
                <li class="${r1.active(_url_code)}">
                    <a href="${r1.url!}" <#if r1.notEnd> class="dropdown-toggle"</#if>>
                        <i class="menu-icon fa fa-caret-right"></i>
                        ${r1.resourceName!}
                        <#if r1.notEnd><b class="arrow fa fa-angle-down"></b></#if>
                    </a>
                    <b class="arrow"></b>
                    <@resourceTree resource=r1 />
                </li>
            </#list>
        </ul>
    </#if>
</#macro>